<extend name="_Layout/main"/>

<block name="style">
    <link rel="stylesheet" href="__CSS__/supersized.css">
    <style>
        .container {
            position: relative;
            z-index: 2;
        }
        .login_a {
            width: 310px;
            background-color: #FFF;
            margin: 0 auto;
            border-radius: 5px;
            text-align: center;
        }
        .login_a input[type="text"] {
            width: 90%;
            color: #9199aa;
            font-size: 18px;
            outline: none;
            border: none;
            font-weight: 100;
            border-bottom: 1px solid #40D0AD;
            margin-top: 0.9em;
            padding-bottom: 0.4em;
        }
        .login_a input[type="password"] {
            width: 90%;
            color: #9199aa;
            font-size: 18px;
            outline: none;
            border: none;
            font-weight: 100;
            padding-top: 0.5em;
            padding-bottom: 0.4em;
            border-bottom: 1px solid #40D0AD;
        }
        .login_a input[type="email"] {
            width: 90%;
            color: #9199aa;
            font-size: 18px;
            outline: none;
            border: none;
            font-weight: 100;
            padding-top: 0.5em;
            padding-bottom: 0.4em;
            border-bottom: 1px solid #40D0AD;
        }
        .btn-primary {
            border-radius: 0;
            height: 50px;
            font-size:1.2em;
            letter-spacing: 0.2em;
        }
        .container {
            height: 700px;
        }
        @media (max-width: 320px) {
            input[type="text"] {
                width: 100%;
                padding: 0;
                font-size: 17px;
                margin-top: .5em;
            }
            input[type="password"] {
                width: 100%;
                padding: 0;
                font-size: 17px;
                margin-top: .5em;
                margin-bottom: 2em;
            }
            .container {
                height: 518px;
            }
            .login_a {
                width:290px;
                margin-top: 120%;
            }
        }
        .reg-group {
            position: relative;
            width: 90%;
            margin: 0 auto;
        }
        .verifyimg-box {
            position: absolute;
            top: -16px;
            right: 0;
            width: 140px;
        }
        .main-title {
            color: #FFF;
            letter-spacing: 5px;
        }
    </style>
</block>

<block name="wrap">
    <div class="container reg-box" id="reg1">
        <h1 class="main-title">新用户注册</h1>
        <form class="login-form form reg-form-username" action="__SELF__" autocomplete="off" method="post">
            <div class="login_a">
                <input type="text" placeholder="请输入用户名" name="username">
                <input type="password" placeholder="请输入密码" name="password">
                <input type="password" placeholder="请确认密码" name="repassword">
                <input type="text" placeholder="请输入邮箱" name="email" id="email">
                <div class="reg-group">
                    <input type="text" class="form-control" name="verify" placeholder="请输入验证码">
                    <span class="input-group-addon verifyimg-box">
                        <img class="verifyimg reload-verify" alt="验证码" src="{:U('verify')}" title="点击刷新">
                    </span>
                </div>
                <div>
                    <label class="item-label small">点击下一步即表示您同意<a href="#">服务条款</a></label>
                    <div class="form-group">
                        <input type="hidden" name="reg_type" value="username">
                        <button type="submit" class="btn btn-primary btn-block submit ajax-post" target-form="reg-form-username">下 一 步</button>
                    </div><!-- {:hook('SyncLogin')} 第三方登陆钩子 -->
        </form>
    </div>

    <!--{:hook('SyncLogin')}  第三方登陆钩子 -->
    <div class="bottom navbar-fixed-bottom text-center">
        <span>Copyright <a href="/" >{:C('WEB_SITE_COPYRIGHT')}</a> All rights reserved.</span>
        <script type="text/javascript" src="__PUBLIC__/libs/particles/particles.min.js"></script>
        <script src="__JS__/supersized.3.2.7.min.js"></script>
        <script src="__JS__/supersized-init.js"></script>
    </div>
</block>

<block name="script">
    <script type="text/javascript">



        $(function(){
            //发送验证码倒计时
            function time(that, wait){
                if(wait == 0){
                    $(that).removeClass('disabled').prop('disabled',false);
                    $(that).html('重新发送验证码');
                }else{
                    $(that).html(wait+'秒后重新发送');
                    wait--;
                    setTimeout(function(){
                        time(that, wait);
                    }, 1000);
                }
            }

            $(".reload-verify").on('click', function() {
                var verifyimg = $(".verifyimg").attr("src");
                if (verifyimg.indexOf('?') > 0) {
                    $(".verifyimg").attr("src", verifyimg + '&random=' + Math.random());
                } else {
                    $(".verifyimg").attr("src", verifyimg.replace(/\?.*$/, '') + '?' + Math.random());
                }
            });

            $('.send-mail-verify').click(function(){
                var url = '';
                var that = this;
                if(url = "{:U('User/SendMailVerify')}"){
                    var email = $('input[name="email"]').val();
                    var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                    if(!filter.test(email)){
                        $.alertMessager('邮箱账号不正确', 'danger');
                        $(that).addClass('disabled').prop('disabled', true);
                        time(that, 5);
                    }else{
                        $(that).addClass('disabled').prop('disabled', true);
                        time(that, 30);
                        $.post(url,{'email':email, 'title':'用户注册'}).success(function(data){
                            message = data.info;
                            if(data.status == 1){
                                $.alertMessager(data.info, 'success');
                            }else{
                                $.alertMessager(data.info, 'danger');
                            }
                        });
                    }
                }
                return false;
            });

            $('.send-mobile-verify').click(function(){
                var url;
                var that = this;
                if(url = "{:U('User/sendMobileVerify')}"){
                    var mobile = $('input[name="mobile"]').val();
                    var filter  = /^1\d{10}$/;
                    if(!filter.test(mobile)){
                        $.alertMessager('手机号码不正确', 'danger');
                        $(that).addClass('disabled').prop('disabled', true);
                        time(that, 5);
                    }else{
                        $(that).addClass('disabled').prop('disabled', true);
                        time(that, 30);
                        $.post(url,{'mobile':mobile, 'title':'用户注册'}).success(function(data){
                            if(data.status == 1){
                                $.alertMessager(data.info, 'success');
                            }else{
                                $.alertMessager(data.info, 'danger');
                            }
                        });
                    }
                }
                return false;
            });
        });
    </script>
</block>
